<template>
    <div class="contain">
     
      <el-card>
       
       <el-form :model="form" :rules="rules" ref="form">
          
          <el-form-item label="主标题" :label-width="formLabelWidth" prop="maintitle">
            <el-input v-model="form.maintitle" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="副标题" :label-width="formLabelWidth" prop="subtitle">
            <el-input v-model="form.subtitle" autocomplete="off"></el-input>
          </el-form-item>
         
          <el-form-item label="正文" :label-width="formLabelWidth" prop="maintext">
            <!-- <el-input v-model="form.maintext" autocomplete="off"></el-input> -->

            <vue-editor
              v-model="form.maintext"
              @focus="onEditorFocus"
              @blur="onEditorBlur"
              @selection-change="onSelectionChange"
            />

          </el-form-item>
         
        </el-form>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false;resetForm('form')">取 消</el-button>
          <el-button type="primary" @click="addNews('form')" v-if="!isEdit">添 加</el-button>
          <el-button type="primary" @click="updateNews('form')" v-else>提 交</el-button>
        </div>
     
      </el-card>
  
    </div>
</template>
  
<script>
  
    import { VueEditor } from "vue2-editor";

    export default {
      data() {
        return {
         params:{
           id:0
         },
          form: {
            id: 1, 
            createTime: '', 
            maintitle: '', 
            subtitle: '', 
            maintext:'',
            OPID: '1', 
            OPName: 'admin', 
            isShow: true, 
          },
          rules: {
            maintitle: [
              { required: true, message: '请输入主标题', trigger: 'blur' }
            ],
            subtitle: [
              { required: true, message: '请输入副标题', trigger: 'blur' }
            ],
            maintext: [
              { required: true, message: '请输入正文', trigger: 'blur' }
            ],
          },
          formLabelWidth: '120px',
          dataList: [],
          editType: '新增数据',
          isEdit: false,
          totalPages: 0,
          totals: 0,
          imageTooLarge: false,
          loading: false,
  
          isAvailable: true,
        }
      },
      components: { VueEditor },
      computed: {
      },
      created() {
      },
      mounted() {
        var query=this.$route.query;

        if(query.isEdit=='false'){
          this.isEdit=false;
        }
        else{
          this.isEdit=true;
        }
        
        this.params.id=query.id;
        console.log(this.isEdit) 
        if(this.isEdit==true){
          this.getNewsDetails();
        }
      },
      methods: {
        
        // 获取详情
        async getNewsDetails() {
  
          this.loading = true
  
          let res = await this.$axios.post(this.API.news.getNewsDetails,this.params);
          if (res.data.code == "0") {

              this.dataList = res.data.data[0];
              this.form=this.dataList

              this.$message.success("查询成功");
  
              this.loading = false
            }
          
        },
        
        
        //添加信息
        async addNews(formName) {

          this.$refs[formName].validate(async (valid) => {
            if (valid) {
              let res = await this.$axios.post(this.API.news.addNews, this.form);
              if (res.data.code == 0) {
                this.$message.success("添加成功！")
                window.close();
                this.dialogFormVisible = false;
              }
            } else {
              return false;
            }
          });
  
        },
        //编辑信息
        async updateNews(formName) {
  
          this.$refs[formName].validate(async (valid) => {
            if (valid) {
              let res = await this.$axios.post(this.API.news.updateNews, this.form);
              if (res.data.code == 0) {
                this.$message.success("提交成功！")
                window.opener=null;
                window.open('','_self');
                window.close();
                this.dialogFormVisible = false;
              }
            } else {
              return false;
            }
          });
        },
        
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        
        onEditorBlur(quill) {
          console.log("editor blur!", quill);
        },

        onEditorFocus(quill) {
          console.log("editor focus!", quill);
        },

        onSelectionChange(range) {
          console.log("selection change!", range);
        }
        
      }
    }
  </script>
  
  <style lang="less" scoped>
   .el-card{
     margin:20px 0;
   }
   .el-row-col_span{
    width: 78px;
    display: inline-block;
    text-align: right;
    margin-right: 10px ;
   }
   .el-input{
     width: 80%;
   }
  </style>